<template>
   <div class="page-box">
     <el-form ref="formRef"
           :rules="formRules"
           :model="formData"
           class="info-form"
           label-width="110px">
    <el-tabs v-model="active">
      <el-tab-pane label="基础信息"
                   name="base">
        <br><br>
          <el-col :span="16"
                  :offset="2">
            <el-form-item label="标题"
                          prop="title">
              <el-input size="medium"
                        v-model="formData.title"
                        placeholder="请输入标题名称">
                <el-button slot="append"
                           icon="el-icon-search">查重</el-button>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8"
                  :offset="2">
            <el-form-item label="作者"
                          prop="author">
              <el-input size="medium"
                        v-model="formData.author"
                        placeholder="请输入作者"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="分类"
                          prop="cateid">
              <el-select v-model="formData.cateid">
                <el-option v-for="item in catelist" :key="item.id" :label="item.catename" :value="item.id">{{item.catename}}</el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8"
                  :offset="2">
            <el-form-item label="阅读次数"
                          prop="click">
              <el-input-number v-model="formData.click"
                               size="normal"
                               label=""
                               :min="1"
                               :max="10"
                               :step="1"
                               :controls="true"
                               controls-position="both">
              </el-input-number>

            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="创建时间"
                          prop="create_date">
              <el-date-picker v-model="formData.create_date"
                              type="datetime"
                              size="normal"
                              placeholder="选择日期时间">
              </el-date-picker>

            </el-form-item>
          </el-col>
          <el-col :span="8"
                  :offset="2">
            <el-form-item label="是否推荐"
                          prop="ishot">
              <el-switch v-model="formData.ishot"
                         active-text="是"
                         inactive-text="否"
                         :active-value="1"
                         :inactive-value="0">
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否置顶"
                          prop="istop">
              <el-switch v-model="formData.istop"
                         active-text="是"
                         inactive-text="否"
                         :active-value="1"
                         :inactive-value="0">
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="8"
                  :offset="2">
            <el-form-item label="收藏数量"
                          prop="lovenum">
              <el-input size="medium"
                        v-model="formData.lovenum"
                        placeholder="请输入收藏数量名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="16"
                  :offset="2">
            <el-form-item label="文章缩略图"
                          prop="pic">
              <image-upload v-model="formData.pic" field-name="file" :limit="3" :upload-fn="uploadFile"></image-upload>
            </el-form-item>
          </el-col>
          <el-col :span="16"
                  :offset="2">
            <el-form-item label="文章标签"
                          prop="tags">
              <el-checkbox-group v-model="formData.tags" >
                <el-checkbox v-for="item in taglist" :key="item.key" :label="item.tagname">
                  {{item.tagname}}
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
      </el-tab-pane>
      <el-tab-pane label="SEO信息"
                   name="seo">
        <br><br>
        <el-col :span="16"
                :offset="2">
          <el-form-item label="seo关键字"
                        prop="keywords">
            <el-input type="textarea"
                      rows="3"
                      size="medium"
                      v-model="formData.keywords"
                      placeholder="请输入seo关键字名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="16"
                :offset="2">
          <el-form-item label="seo的 描述"
                        prop="description">
            <el-input type="textarea"
                      size="medium"
                      rows="3"
                      v-model="formData.description"
                      placeholder="请输入seo的 描述名称"></el-input>
          </el-form-item>
        </el-col>
      </el-tab-pane>
      <el-tab-pane label="文章内容"
                   name="info">
        <br><br><br>
        <el-col :span="19"  :offset="1">
          <el-form-item label="文章内容"
                        prop="content">
            <WangEditor ref-name='titleEditor'
                        placeholder="请输入文章内容名称"
                        v-model="formData.content" />
          </el-form-item>
        </el-col>
      </el-tab-pane>
    </el-tabs>
    <el-row type="flex"  justify="center">
      <el-button size="small" icon="el-icon-plus" type="success" @click="submit">立即发布</el-button>
      <el-button size="small" icon="el-icon-folder-checked" type="primary">保存草稿</el-button>
      <el-button size="small" icon="el-icon-back" type="warning" @click="$router.push('/content_article')">返回列表</el-button>
    </el-row>
  </el-form>
   </div>
</template>
<script>
import { addData, updateData, getInfoData } from '@/api/content/article'
import { mapState, mapActions } from 'vuex'
import { uploadFile } from '@/api'
const formRules = {
  author: [{ required: true, message: '必须', trigger: 'blur' }],
  cateid: [{ required: true, message: '必须', trigger: 'blur' }],
  click: [{ required: true, message: '必须', trigger: 'blur' }],
  content: [{ required: true, message: '必须', trigger: 'blur' }],
  create_date: [{ required: true, message: '必须', trigger: 'blur' }],
  description: [{ required: true, message: '必须', trigger: 'blur' }],
  ishot: [{ required: true, message: '必须', trigger: 'blur' }],
  istop: [{ required: true, message: '必须', trigger: 'blur' }],
  keywords: [{ required: true, message: '必须', trigger: 'blur' }],
  lovenum: [{ required: true, message: '必须', trigger: 'blur' }],
  pic: [{ required: true, message: '必须', trigger: 'blur' }],
  status: [{ required: true, message: '必须', trigger: 'blur' }],
  tags: [{ required: true, message: '必须', trigger: 'blur' }],
  title: [{ required: true, message: '必须', trigger: 'blur' }]
}
const defaultItem = {
  author: '', // 作者的用户名， 用户发布的user-名称
  cateid: '', // 分类ID
  click: '', // 阅读次数
  content: '', // 文章内容
  create_date: '', // 创建时间
  description: '', // seo的 描述
  ishot: '', // 0表示不推荐1表示推荐
  istop: '', // 是否置顶，1是，0否，置顶的文章必须是推荐文章
  keywords: '', // seo关键字
  lovenum: '', // 收藏数量
  pic: [], // 缩略图，可多张逗号分隔
  status: '', // 文章状态，0待审核，1草稿箱，2已发布，3已删除
  tags: [], // 文章的标签，可多个逗号分隔
  title: '' // 标题
}
export default {
  name: 'articleInfo',
  data () {
    return {
      isAdd: true,
      formData: { ...defaultItem },
      formRules,
      active: 'base'
    }
  },
  computed: {
    title () {
      return this.isAdd ? '添加' : '修改'
    },
    ...mapState('content', ['catelist', 'taglist'])
  },
  created () {
    if (this.$route.params.id) {
      this.getInfo(this.$route.params.id)
    }
  },
  mounted () {
    if (this.catelist.length === 0) this.getCateList()
    if (this.taglist.length === 0) this.getTagList()
  },
  methods: {
    uploadFile,
    ...mapActions('content', ['getCateList', 'getTagList']),
    //  获取单行信息回显
    async getInfo (id) {
      this.formData = await getInfoData(id)
      this.formData.tags = this.formData.tags ? this.formData.tags.split(',') : []
      this.formData.pic = this.formData.pic ? this.formData.pic.split(',') : []
      this.isAdd = false
    },
    //  增加或更新提交
    async submit () {
      //  验证
      try {
        await this.$refs.formRef.validate()
      } catch (error) {
        return this.$message.warning('验证失败')
      }
      // 加工数据
      const formData = JSON.parse(JSON.stringify(this.formData))
      formData.create_date = new Date(formData.create_date).getTime()
      formData.tags = formData.tags.length ? formData.tags.join() : null
      formData.pic = formData.pic.length ? formData.pic.join() : null
      //  提交
      if (this.isAdd) {
        await addData(formData)
        this.$message.success('添加成功')
      } else {
        await updateData(formData)
        this.$message.success('修改成功')
      }
      // 更新列表
      this.$router.replace('/content_article')
      // 关闭
      this.cancel()
    },
    cancel () {
      this.isAdd = true
      this.formData = { ...defaultItem }
      this.$refs.formRef.clearValidate()
    }
  }
}
</script>
<style scoped></style>
